<template>
    <div class="activityItem" @click='goDetail'>
        <div class="flex">
            <span class="activity-status" :class="'status-'+activityData.status">
                {{activityData.status|activityStatus}}
            </span>
            <div class="title">
                {{activityData.title}}
            </div>
        </div>
        <div class="flex flex-space-between">
            <span>服务时间：<span class="tips">{{activityData.activityTime}}</span> <span class="ml10 text-muted">{{activityData.week}}</span></span>
            <div class="ml10">
                <span>招募人数：</span>
                <span>{{activityData.recruitNum}}</span>人
            </div>
        </div>
        <div class="flex-space-between">
            <span>
                服务天数
                <i class="tips">{{activityData.activityDays}}</i>天
            </span>
            <div>报名人数：
                <span class="apply-num">还差{{activityData.recruitNum-activityData.applyNum}}人</span>
                </div>
        </div>
        <div>
            <span>服务地点：</span>
            {{activityData.activityPlace}}
        </div>
        <div>
            <span>服务团体：</span>
            {{activityData.teamName}}
        </div>
    </div>    
</template>

<script>
export default {
    props:{
        activityData:{}
    },
    computed: {
    },
    methods: {
        goDetail(){
            this.$router.push(`/voluteerActivityDetail/${this.activityData.activityId}`)
        }
    },
}
</script>

<style scoped lang='scss'>
.activityItem{background: #EFEFEF;border-radius: .1rem;color: #888888;margin-bottom: .14rem;
    padding: .33rem .27rem ;
}
.activity-status{
    min-width: 40px;
    border-radius: .16rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: .32rem;
    padding: 0 .2rem;
    margin-right: .32rem;
}
.title{color: #393939;
    font-size: 15px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
.tips{
    color: #393939;
    font-style: normal;
}
.text-muted {
    color:#888888;
}
.activityItem{font-size: 12px;
    &>div{margin-bottom: .2rem;;}
}
.apply-num{border: solid 1px #F65D5D;color: #F65D5D;border-radius: 4px;
padding:  2px;
}
.status-0{
    background: #b5bbbe;
}
.status-1{
    background: #FFA518;
}
.status-2{
    background: #378EEF;
}
.status-3{
    background: #0A930A;
}
.status-4{
    background: #F65D5D;
}
</style>
